// 函数组件
import { SyncOutlined } from '@ant-design/icons';
import { Button, Collapse, ConfigProvider, Modal, Select, Table } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
import type { ColumnsType } from "antd/es/table";
import { useEffect, useState } from 'react';
import { useNavigate } from "react-router-dom";
import "../../../../src/App.css";
import { purchase } from '../../../api/userApi';
import "./userCss/BuyPower.less";
const { Panel } = Collapse;
function BuyPower() {
  const navigate = useNavigate();
  interface Type {
    key:number,
    buyId: number;//用户id
    buyName: string;//用户名字
    buyAccount: string; //用户账户
    buyOrderAverage:number;//购买均价
    buySpendMoney:number;//消费金额
    buySpendTimes:number,//消费次数
    buyTime:string//购买时间

  }
  
  // const [size, setSize] = useState<SizeType>('small'); // default is 'middle'
  // 列名
  const [data, setData] = useState<Type[]>([]);
  let flag;
  // 表格列
  const columns: ColumnsType<Type> = [
    {
      title: "序号",
      dataIndex: "buyId",
      width: "7%",
      align: "center",
    },
    {
      title: "用户昵称",
      dataIndex: "buyName",
      align: "center",
    },
    {
      title: "用户账号",
      dataIndex: "buyAccount",
      align: "center",
    },
    {
      title: "消费金额",
      dataIndex: "buySpendMoney",
      align: "center",
    },
    {
      title: "消费次数",
      dataIndex: "buySpendTimes",
      align: "center",
    },
    {
      title: "订单均价",
      dataIndex: "buyOrderAverage",
      align: "center",
    },
    {
      title: "最近购买时间",
      dataIndex: "buyTime",
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "operation",
      align: "center",
      width: "20%",
      render: (value, record) => (
        <div>
          
          <button
            onClick={() => {
              goDetails(value);
            }}
            className="one"
          >
           
            查看
          </button>
        </div>
      ),
    },
  ];
  // 表格数据
  const buyPowerData: Type[] = [];
  // 请求列表数据
  useEffect(() => {
    getUserData();
  }, []);

  // 获取数据
  const getUserData = async () => {
    try {
      let res = await purchase();
      // console.log('进入了res');
      if (res.code == "200") {
        console.log("4565667", res);
        let newData = res.data.map((item:any,index:any)=>{
            item['key'] = index
            return item
        })
        console.log("newData",newData);
        
        setData(newData);
      }
    } catch (err) {
      console.log(err);
    }
  };

 


 
 // 是否显示弹窗
 let [showModel, setShowModel] = useState(false)
    
 // 需发送的查询参数
 const reqData:any = {
     consume_time: '',
     consume_num: '',
     consume_money: '',
     consume_average: '',
     consume_tag: '',
 }
 // 查询选项
 let [consume, setConsume] = useState([
     {
         consume_title: '最近消费',
         consume_content: ['不限', '一周内', '两周内', '一个月内', '自定义'],
         active: 0
     },
     {
         consume_title: '消费次数',
         consume_content: ['不限', '一次', '两次', '五次', '自定义'],
         active: 0
     },
     {
         consume_title: '消费金额',
         consume_content: ['不限', '0-100', '101-200', '201-300', '301-400', '自定义'],
         active: 0
     },
 ])

 // 筛选查询
 const change = (value:any, index:any, ind:any) => {
     let name = ''
     switch (index) {
         case 0: name = 'consume_time'
             break;
         case 1: name = 'consume_num'
             break;
         case 2: name = 'consume_money'
             break;
         case 3: name = 'consume_average'
             break;
         case 4: name = 'consume_tag'
             break;
     }
     
     reqData[name] = value;
     consume[index].active = ind;
     if(value !== '自定义'){
         setConsume([...consume])
     }else{
         setShowModel(true)
     }
 }
 // 弹窗确认函数
 const handleOk = () => {
     setShowModel(false)
 }

 // 弹窗取消函数
 const handleCancel = () => {
     setShowModel(false)
 }




    //点击跳转详情页面
    const goDetails = (value: {}) => {
      navigate("/home/user/userDetails");
    };

  return (
    <div className='BuyPower'>
      {/* 头部 */}
      <div className='head'>
        {/* 左边标题 */}
        <div className='page-title'>
          <p>购买力筛选</p>
          <Button className='reset-list' type="primary" icon={<SyncOutlined />}>
            刷新
          </Button>
        </div>
      </div>

      {/* 内容区 */}
      <div className='page-context'>
      
        {/* 筛选查询 */}
        <div>
                {consume.map((item, index) => {
                    return (
                        <div key={item.consume_title} className='search-box'>
                            <div className='search-title'>{item.consume_title}:</div>
                            <div className='search-content'>
                                {item.consume_content.map((ite:any, ind:any) => {
                                    return (
                                        <div className={["search-text", item.active === ind?"active":null].join(' ')} style={{color: (ite === '0') ? 'blue' : ''}} key={ite} onClick={() => change(ite, index, ind)}>{ite}</div>
                                    )
                                })}
                            </div>
                        </div>
                    )
                })}
            </div>


        {/* 表格部分 */}
        <div className="data-list">
          <div className="list-title">
            <p>数据列表</p>
            <div className="list-operation">
              <div className="operation-one">
                <p>排序方式</p>
                <Select
                  className="select-shelf"
                  placeholder="排序方式"
                  style={{ width: 120 }}
                  allowClear
                  options={[
                    { value: "lucy", label: "按时间倒序" },
                    { value: "bm", label: "按时间顺序" },
                  ]}
                />
              </div>
              <div>
                <button  className='left-item'>设置标签</button>
              </div>
              <div>
                <button className='add'>导出</button>
              </div>
            </div>
          </div>

          {/* 表格部分 */}
          <ConfigProvider locale={zh_CN}>
            <Table
              rowKey={(item) => item.key}
              // rowSelection={rowSelection} 
              columns={columns} 
              dataSource={data} 
              pagination={{ pageSize: 5 }}  
              className='table-context'/>
          </ConfigProvider>
          {/* 弹框 */}
          <Modal title="Basic Modal" open={showModel} onOk={handleOk} onCancel={handleCancel}>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </Modal>
        </div>
      </div>
    </div>
  )
}

export default BuyPower